<template>
  <div class="container">
    <el-row
      type="flex"
      justify="space-between"
    >
      <!-- 订单表单 -->
      <div class="main">
        <orderForm
          v-if="flightData.insurances"
          :data="flightData"
          @setTotalPrice="setTotalPrice"
        ></orderForm>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <orderAside
          v-if="flightData.insurances"
          :data="flightData"
          :totalPrice="totalPrice"
        ></orderAside>
      </div>
    </el-row>
  </div>
</template>

<script>
import { selectAir } from "@/api/air";
import orderForm from "@/components/air/orderForm";
import orderAside from "@/components/air/orderAside";
export default {
  data() {
    return {
      flightData: {},
      totalPrice: 0,
    };
  },
  components: {
    orderForm,
    orderAside,
  },
  async mounted() {
    const { query } = this.$route;
    let res = await selectAir(query.id, query.seat_xid);
    if (res) {
      this.flightData = res.data;
    }
  },
  methods: {
    setTotalPrice(v) {
      console.log(v);
      this.totalPrice = v;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}

/*aside*/
.aside {
  width: 350px;
  height: fit-content;
  border: 1px #ddd solid;
}
</style>